<template>
	<view class="container">
		<view style="display: flex;background-color: #FFFFFF;border-bottom: 2upx solid #F5F5F5;margin: 20upx;border-radius: 8upx;">
			<view class="input-view">
				<uni-icon type="search" size="17" color="#3CA4FA" />
				<input confirm-type="search" :disabled="isShow" class="input" type="text" @tap="doModelShow('input')" @input="doChangeValue" placeholder="输入搜索车牌/车主姓名" @confirm="confirm" />
			</view>
			<view class="zcModel-active iconfont icon-shaixuan" @tap="doModelShow">
				筛选
			</view>
		</view>
		
		<view class="content" v-show="isShow">
			<scroll-view style="height: 100%;" scroll-y @scrolltolower="loadMore1">
				<block v-for="(item,index) in InsurePolicy" :key="index">
					<myCustomerPublish style="margin-bottom: 20upx;" :isPublish="false" :item='item' :index="index" @doMyCustomerInfo="doMyCustomerInfo"></myCustomerPublish>
				</block>
				<view v-show="loadingText" class="uni-tab-bar-loading">
					{{loadingText}}
				</view>
				<view v-if="InsurePolicy.length <1 && isNoDataShow" class="uni-tab-bar-loading" style="text-align: center;">
					<view class="no_model">
						<image :src="imgPath+'UniImages/no_data.png'" mode="widthFix" style="width: 100%;"></image>
						<view class="no_text">暂无数据</view>
					</view>
				</view>
			</scroll-view>
			
		</view>
		<view class="content uni-flex zcFlex_column" style="background: #FFFFFF;padding: 20upx;" v-show="!isShow">
			<view class="uni-flex zcAlignC_center zcJustifyC_end">
				<button @tap="zcResetLebel" class="zcBut" type="primary">重置</button>
				<button class="zcBut" type="primary" @tap="zcSearchCustomers('')">确认</button>
			</view>
			
			<scroll-view scroll-y style="overflow: auto;">
				<block v-for="(item,index) in popups" :key="index">
					<view class="zcModel-title zcJustifyC_between">{{item.titel}}</view>
					<view class="popup_content" >
						<block v-for="(item1,idx) in item.list" :key="idx">
							<view :data-popupId="index" class="popup_item" :class="{active:item.actives.indexOf(idx) !== (-1)}" :id="idx" :style="{'flex': '0 0 '+item.row+'%'}" @tap="doChenkItem">{{(item1)}}</view>
						</block>
					</view>
				</block>
				
				<block v-for="(item,index) in labels" :key="index">
					<view class="uni-flex zcFlex_column" style="background-color: #FFFFFF;">
						<view class="zcModel-title zcJustifyC_between">{{item.title}}</view>
						<view v-show="item.isShow" class="popup_content">
							<block v-for="(item1,idx) in item.list" :key="idx">
								<view :data-popupId="index" class="popup_item" :class="{active:item.actives.indexOf(idx) !== (-1)}" :id="idx" :style="{'flex': '0 0 '+item.row+'%'}" @tap="doChenkItem2">{{item1.Name}}</view>
							</block>
						</view>
					</view>
				</block>
			</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	import myCustomerPublish from '../../components/my-customer-publish/my-customer-publish.vue'
	let _this;
	export default {
		components:{
			uniIcon,
			myCustomerPublish
		},
		data() {
			return {
				imgPath:this.$ZcPublic.Domain,
				isNoDataShow:false,
				isShow:true,
				inputValue:'',
				popups:[
					{
						actives:[],
						titel:'排序方式：',
						popupValue:'',
						type:'audio',
						row:48,
						list:[
							'到期排名','姓名排名'
						]
					},
					{
						actives:[],
						titel:'保险到期月份：',
						popupValue:'',
						type:'checkbox',
						row:14.6,
						list:[
							1,2,3,4,5,6,7,8,9,10,11,12
						]
					}
				],
				labels:[],
				labelInfos:[],
				InsurePolicy:[],
                StartRow:0,	// 当前分页开始下标
                dataLength:0,	// 当前数据 个数
				loadingText:''
				
			}
		},
		onLoad() {
			_this = this;
            
            _this.zcSearchCustomers('init');	// 客户列表
		},
		onShow() {
			
		},
		methods: {
			doModelShow(type) {
                if (_this.isShow) {
                    _this.zcGetSalesManCustomerQueryCondition();
                }
                
				if (type === 'input') {
					if (_this.isShow) {
						_this.isShow = false;
					}
				}else {
					_this.isShow = !_this.isShow;
				}
			},
			//	获取 输入框值
			doChangeValue(res) {
				_this.inputValue = res.detail.value;
			},
			//  监听手机 点击键盘右下角  完成/搜索  事件
			confirm(e) {
				if (!_this.isShow) {
					return;
				}
			},
			doChenkItem(e) {
				// console.log('当前选择：',e);
				let id  = parseInt(e.target.id);
				let popupId = parseInt(e.target.dataset.popupid);
				
				// 多选
				//Array.indexOf(index);  表示Array数组中是否包含 index 值，包含则返回该值在数组中的下标，否则返回 -1
				if (_this.popups[popupId].type === 'checkbox') {
					if (_this.popups[popupId].actives.indexOf(id) !== (-1)) {
						for (let i = 0; i < _this.popups[popupId].actives.length; i++) {
							if (_this.popups[popupId].actives[i] === id) {
								_this.popups[popupId].actives.splice(i,1);
							}
						}
					}else {
						_this.popups[popupId].actives.push(id);
					}
				}
				
				//  单选
				if (_this.popups[popupId].type === 'audio') {
					if (_this.popups[popupId].actives.length === 0) {
						_this.popups[popupId].actives.push(id);
					}else {
						_this.popups[popupId].actives = [];
						_this.popups[popupId].actives.push(id);
					}
				}
			},
			//标签 选中 操作
			doChenkItem2(e) {	
				// console.log('当前选择：',_this.labelInfos[0]);
				let id  = parseInt(e.target.id);
				let popupId = parseInt(e.target.dataset.popupid);
				
				if (_this.labels[popupId].isDisabled) {
					return;
				}
				
				// 多选
				//Array.indexOf(index);  表示Array数组中是否包含 index 值，包含则返回该值在数组中的下标，否则返回 -1
				if (_this.labels[popupId].type === 'checkbox') {
					if (_this.labels[popupId].actives.indexOf(id) !== (-1)) {
						for (let i = 0; i < _this.labels[popupId].actives.length; i++) {
							if (_this.labels[popupId].actives[i] === id) {
								//  当前选中的标签已经被选中了，所以进行删除选中标签相关
								_this.labels[popupId].actives.splice(i,1);
								if (_this.labels[popupId].list[id].oS) {
									for (let k = 0; k < _this.labels.length; k++) {
										if (_this.labels[k].value === _this.labels[popupId].list[id].Code) {
											_this.labels.splice(k,1);	// 删除
										}
									}
								}
							}
						}
					}else {
						//  当前选中的标签 未选中，所以进行添加选中标签相关
						_this.labels[popupId].actives.push(id);
						
						if (_this.labels[popupId].list[id].oS) {
							let item = {
								title:_this.labels[popupId].list[id].oS[0].Name,
								Code:_this.labels[popupId].list[id].oS[0].Code,
								isShow:true,
								value:_this.labels[popupId].list[id].Code,
								row:48,
								isDisabled:false,
								type:'audio',
								info:_this.labels[popupId].list[id].oS[0],
								actives:[],
								list:_this.labels[popupId].list[id].oS[0].childs
							}
							if (_this.labels[popupId].list[id].oS[0].sModel === '单选') {
								item.type = 'audio';
							}else if (_this.labels[popupId].list[id].oS[0].sModel === '多选') {
								item.type = 'checkbox';
							}
							if (_this.labels[popupId].list[id].oS[0].OnlyWrite) {
								item.isDisabled = true;
							}
							// _this.labelInfos[0].childs.splice((popupId+1),0,_this.labelInfos[0].childs[popupId].childs[id].oS[0]);
							_this.labels.splice((popupId+1),0,item);
						}
					}
				}
				
				//  单选
				if (_this.labels[popupId].type === 'audio') {
					if (_this.labels[popupId].actives.length === 0) {
						_this.labels[popupId].actives.push(id);
						
						if (_this.labels[popupId].list[id].oS) {
							let item = {
								title:_this.labels[popupId].list[id].oS[0].Name,
								Code:_this.labels[popupId].list[id].oS[0].Code,
								isShow:true,
								value:_this.labels[popupId].list[id].Code,
								row:48,
								isDisabled:false,
								type:'audio',
								info:_this.labels[popupId].list[id].oS[0],
								actives:[],
								list:_this.labels[popupId].list[id].oS[0].childs
							}
							if (_this.labels[popupId].list[id].oS[0].sModel === '单选') {
								item.type = 'audio';
							}else if (_this.labels[popupId].list[id].oS[0].sModel === '多选') {
								item.type = 'checkbox';
							}
							if (_this.labels[popupId].list[id].oS[0].OnlyWrite) {
								item.isDisabled = true;
							}
							// _this.labelInfos[0].childs.splice((popupId+1),0,_this.labelInfos[0].childs[popupId].childs[id].oS[0]);
							_this.labels.splice((popupId+1),0,item);
						}
					}else {
						//  单选选中过值的，首先处理选中的值是否添加过 子标签，添加过则删除 。 然后处理但钱选中标签是否有 子标签，有则添加
						
						if (_this.labels[popupId].list[_this.labels[popupId].actives[0]].oS && _this.labels[popupId].actives[0] !== id) {
							let array = JSON.parse(JSON.stringify(_this.labels));
							for (var k = 0; k < array.length; k++) {
								if (array[k].value === array[popupId].list[array[popupId].actives[0]].Code) {
									_this.labels.splice(k,1);	// 删除
								}
							}
							
							_this.labels[popupId].actives = [];
							_this.labels[popupId].actives.push(id);
						}else if(_this.labels[popupId].actives[0] !== id) {
							if (_this.labels[popupId].list[id].oS) {
								let item = {
									title:_this.labels[popupId].list[id].oS[0].Name,
									Code:_this.labels[popupId].list[id].oS[0].Code,
									isShow:true,
									value:_this.labels[popupId].list[id].Code,
									row:48,
									isDisabled:false,
									type:'audio',
									info:_this.labels[popupId].list[id].oS[0],
									actives:[],
									list:_this.labels[popupId].list[id].oS[0].childs
								}
								if (_this.labels[popupId].list[id].oS[0].sModel === '单选') {
									item.type = 'audio';
								}else if (_this.labels[popupId].list[id].oS[0].sModel === '多选') {
									item.type = 'checkbox';
								}
								if (_this.labels[popupId].list[id].oS[0].OnlyWrite) {
									item.isDisabled = true;
								}
								// _this.labelInfos[0].childs.splice((popupId+1),0,_this.labelInfos[0].childs[popupId].childs[id].oS[0]);
								_this.labels.splice((popupId+1),0,item);
							}
							
							_this.labels[popupId].actives = [];
							_this.labels[popupId].actives.push(id);
						}else {
							if (_this.labels[popupId].list[_this.labels[popupId].actives[0]].oS) {
								let array = JSON.parse(JSON.stringify(_this.labels));
								for (var k = 0; k < array.length; k++) {
									if (array[k].value === array[popupId].list[array[popupId].actives[0]].Code) {
										_this.labels.splice(k,1);	// 删除
									}
								}
							}
							_this.labels[popupId].actives = [];
						}
					}
				}
				
			},
			loadMore1() {
				if (_this.dataLength < 20) {
					return;
				}
				_this.loadingText = '加载中';
				_this.zcSearchCustomers('init');
			},
            zcSearchCustomers(init) {
                if (!init) {
                    _this.StartRow = 0;
                    _this.InsurePolicy = [];
                }
				let search = {
					data:'',
					orderby:'',		//  value : name（姓名排序）  or  date（日期排序）
					InsureEndMonth:'', 	// 保险到期月份
					dataLabels:[],	// 所选标签
                    StartRow: _this.StartRow,	//开始行（用于分页）
                    count: 20		//每页数量，默认为50
				}
				if (_this.inputValue) {
					search.data = _this.inputValue;
				}
				if (_this.popups[0].actives.length>0) {
					if (_this.popups[0].actives[0] === 1) {
						search.orderby = 'name';
					}else if (_this.popups[0].actives[0] === 0) {
						search.orderby = 'date';
					}
				}
				if (_this.popups[1].actives.length>0) {
					let month = '';
					for (let i = 0; i < _this.popups[1].actives.length; i++) {
						if (!month) {
							month = _this.popups[1].list[_this.popups[1].actives[i]];
						}else {
							month = month + ',' +_this.popups[1].list[_this.popups[1].actives[i]];
						}
					}
					
					search.InsureEndMonth = month;
				}
				
				//  标签筛选条件
				for (let i = 0; i < _this.labels.length; i++) {
					if (_this.labels[i].actives.length > 0) {
						for (var k = 0; k < _this.labels[i].actives.length; k++) {
							let item = _this.labels[i].list[_this.labels[i].actives[k]].SN;
							search.dataLabels.push(item);
						}
					}
				}
			
				// console.log('筛选条件 = ',search);
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QuerySalesManCustomer',
						Data: search
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							// console.log('条件查询  客户列表 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							if (resjson.data!==null && resjson.data.length > 0) {
                                _this.dataLength = resjson.data.length;
                                if (_this.dataLength < 20) {
                                	if (_this.StartRow >= 20) {
                                		_this.loadingText = '没有更多了...';
                                	}else{
                                		_this.loadingText = '';
                                	}
                                }else {
                                	_this.StartRow = _this.StartRow+_this.dataLength;	// 初始化 下次加载开始下标
                                	_this.loadingText = '加载更多';
                                }
                                
                                for (let i = 0; i < resjson.data.length; i++) {
                                    _this.InsurePolicy.push(resjson.data[i]);
                                }
                                
							}else {
								_this.isNoDataShow = true;
							}
							if (!init) {
								_this.isShow = !_this.isShow;
							}
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
					},
					Scope: this
				})
				
			},
			//  重置 筛选条件及标签
			zcResetLebel() {
				_this.popups[0].actives = [];
				_this.popups[1].actives = [];
				
				_this.zcGetSalesManCustomerQueryCondition();
                
			},
			doMyCustomerInfo(item) {
				uni.navigateTo({
					url: '../myCustomerInfo/myCustomerInfo?VehicleInfoSN='+item.SN
				});
			},
			zcGetSalesManCustomerQueryCondition() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_GetSalesManCustomerQueryCondition',
						Data: {}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('标签 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							//  标签 数据初始化
							_this.labels = [];
							_this.labelInfos = [];
							if (resjson.data['Labels'] && resjson.data.Labels !== null && resjson.data.Labels.length > 0) {
								_this.labelInfos = resjson.data.Labels;
								
								for (let i = 0; i < resjson.data.Labels.length; i++) {
									if (resjson.data.Labels[i].childs !== null && resjson.data.Labels[i].childs.length > 0) {
										for (let j = 0; j < resjson.data.Labels[i].childs.length; j++) {
											let item = {
												title:resjson.data.Labels[i].childs[j].Name,
												Code:resjson.data.Labels[i].childs[j].Code,
												isShow:true,
												value:'',
												isDisabled:false,
												row:48,
												type:'audio',
												info:resjson.data.Labels[i].childs[j],
												actives:[],
												list:resjson.data.Labels[i].childs[j].childs
											}
											if (resjson.data.Labels[i].childs[j].sModel === '单选') {
												item.type = 'audio';
											}else if (resjson.data.Labels[i].childs[j].sModel === '多选') {
												item.type = 'checkbox';
											}
											if (resjson.data.Labels[i].childs[j].OnlyWrite) {
												item.isDisabled = true;
											}
											for (var s = 0; s < resjson.data.Labels[i].childs[j].childs.length; s++) {
												if (resjson.data.Labels[i].childs[j].childs[s].isS) {
													item.actives.push(s);
												}
											}
											_this.labels.push(item);
											
											//  判断是否存在 二级标签
											for (var k = 0; k < resjson.data.Labels[i].childs[j].childs.length; k++) {
												
												if (resjson.data.Labels[i].childs[j].childs[k].oS !== null && resjson.data.Labels[i].childs[j].childs[k].isS && resjson.data.Labels[i].childs[j].childs[k].oS.length > 0) {
													
													for (var m = 0; m < resjson.data.Labels[i].childs[j].childs[k].oS.length; m++) {
														let item1 = {
															title:resjson.data.Labels[i].childs[j].childs[k].oS[m].Name,
															Code:resjson.data.Labels[i].childs[j].childs[k].oS[m].Code,
															isShow:true,
															value:resjson.data.Labels[i].childs[j].childs[k].Code,
															isDisabled:false,
															row:48,
															type:'audio',
															info:resjson.data.Labels[i].childs[j].childs[k].oS[m],
															actives:[],
															list:resjson.data.Labels[i].childs[j].childs[k].oS[m].childs
														}
														if (resjson.data.Labels[i].childs[j].childs[k].oS[m].sModel === '单选') {
															item1.type = 'audio';
														}else if (resjson.data.Labels[i].childs[j].childs[k].oS[m].sModel === '多选') {
															item1.type = 'checkbox';
														}
														if (resjson.data.Labels[i].childs[j].childs[k].oS[m].OnlyWrite) {
															item1.isDisabled = true;
														}
														for (var t = 0; t < resjson.data.Labels[i].childs[j].childs[k].oS[m].childs.length; t++) {
															if (resjson.data.Labels[i].childs[j].childs[k].oS[m].childs[t].isS) {
																item1.actives.push(t);
															}
														}
														
														_this.labels.push(item1);
													}
													
												}
											}
											
										}
									}
								}
							}
							
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
						
					},
					Scope: this
				})
			},
			
		}
	}
</script>

<style>
	.container{position: absolute;top: 0;left: 0;display: flex;flex-direction: column;}
	.content{flex: 1;height: 100%;position: relative;box-sizing: border-box;overflow: auto;}
	
	/* 搜索栏样式 */
	.input-view {
		/* width: 92%; */
		display: flex;
		background-color: #FFFFFF;
		height: 60upx;
		/* border-radius: 6px; */
		/* padding: 0 4%; */
		flex-wrap: nowrap;
		margin: 10upx 20upx;
		line-height: 60upx;
		flex: 1;
		padding-right: 16upx;
		border-right: 2upx solid #CCCCCC;
	}
	
	.input-view .uni-icon {
		line-height: 36upx !important;
		font-size: 36upx!important;
	}
	
	.input-view .input {height: 60upx;line-height: 60upx;padding: 0 3%;flex: 1;}
	
	.zcModel-active{padding-right: 20upx;display: flex!important;align-items: center!important;}
	.icon-shaixuan:before{
		margin-right: 10upx;
		color: #3CA4FA;
	}

	/* 筛选-样式区 */
	.zcBut{padding: 16upx 40upx;background-color: #e6e6e6!important;font-size: 30upx;margin: 0;margin-right: 30upx;color: #333333!important;display: flex;align-items: center;line-height: 1;}
	.zcBut:last-child{background-color: #26a6ff!important;color: #FFFFFF!important;}
	.button-hover{opacity: 0.6;}
	.popup_content{
		display: flex;
		flex-wrap: wrap;
		padding: 0upx 20upx;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	.popup_item{
		display: flex;
		float: left;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		border: 1px solid #999999;
		color: #999999;
		margin: 10upx 1%;
		height: 46upx;
		border-radius: 46upx;
		box-sizing: border-box;
	}
	.active{border-color: #26a6ff;color: #26a6ff;}
	
    /* 分页底部说明样式 */
    .uni-tab-bar-loading{text-align: center;padding: 20upx;margin-top: 20upx;margin-bottom: 0;}
	/* 无数据样式 */
	.no_model{position: relative;display: flex;flex-direction: column;align-items: center;padding: 0 160upx;padding-top: 100upx;}
	.no_text{font-size: 30upx;color: #999999;position: absolute;bottom: 28upx;}
	
</style>
